<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            width: 480px;
            margin: 50px auto;
        }

        .wrap .nav {
            width: 480px;
            overflow: hidden;
            text-align: center;
            line-height: 40px;

        }

        .wrap .nav li {
            float: left;
            width: 80px;
            border: 1px solid #333;
            box-sizing: border-box;
        }

        .wrap .nav li+li {
            border-left: 0;
        }

        .wrap .nav .active {
            background-color: aquamarine;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="nav">
            <!-- <li data-index="0">link_01</li>
            <li data-index="1">link_02</li>
            <li data-index="2">link_03</li>
            <li data-index="3">link_04</li>
            <li data-index="4">link_05</li>
            <li data-index="5">link_06</li> -->

            <li>link_01</li>
            <li>link_02</li>
            <li>link_03</li>
            <li>link_04</li>
            <li>link_05</li>
            <li>link_06</li>
        </div>
    </div>
</body>
<script>
    var liList = document.querySelectorAll(".nav li");
    console.log(liList);

    /*  
    liList[0].onclick = function () {
         // this
         // liList[0].style.backgroundColor = "#6ff";
         // liList[0].style.color = "#fff";
 
         liList[0].setAttribute("class","active");
     }
     liList[1].onclick = function () {
          // this
         liList[1].setAttribute("class","active");
     }
     liList[2].onclick = function () {
          // this
         liList[2].setAttribute("class","active");
     } */

    // 多元素循环绑的事件的问题?
    // (1) 页面加载时,只是循环绑定事件,事件不会触发 => 循环结束后:li是最后一个li(<li>link_06</li>),i是不满足条件的第一个元素6
    // (2) 点击事件肯定发生在页面加载之后,此时点击元素后,执行事件函数中的代码 => 函数内没有定义自己的li和i => 向外跳一层找父作用域(全局作用域) =>  全局作用于此时的li和i:  <li>link_06</li>  6

    // 解决方法
    // (1) 既然li和i已经不行了,有没有替换的方案
    // li(当前被点击的元素)    => this(在事件中就是绑定事件的元素)
    // i (当前被点击的元素的下标)  => a. 通过给每个元素绑定自定义属性(记录每个元素的下标),点击时取值  b. 查找当前被点击的元素在集合中位置

    // (2) 分析问题: 事件触发时=> 函数内没有定义自己的li和i => 向外跳一层找父作用域(全局作用域) => 如果能找循环当前的li和i,刚好一一对应
    // 如何让事件访问循环当前的li和i? 
    // a. 在事件和循环之间包裹一个新的作用域 (ES5 => 函数作用域)


    // (3) 借助let关键字: 事件触发时=> 函数内没有定义自己的li和i => 向外跳一层找父作用域(块级作用域) => 找循环当前的li和i

    for(let i=0;i<liList.length;i++){
        let li = liList[i];
        // 此处在页面加载时,只是绑定事件  => 事件不会触发
        li.onclick = function(){
            // debugger; // 点击时执行
            // 事件触发时=> 函数内没有定义自己的li和i => 向外跳一层找父作用域(全局作用域) =>  全局作用于此时的li和i:  <li>link_06</li>  6
            li.setAttribute("class","active");
            console.log(li,i);
        }
    }
    // console.log("循环结束后",li,i); // 此处会报错 => li和i都是局部变量


    /* {
        let i = 0;
        {
            let li = liList[i];
            // 此处在页面加载时,只是绑定事件  => 事件不会触发
            li.onclick = function(){
                debugger;
                // 事件触发时=> 函数内没有定义自己的li和i => 向外跳一层找父作用域(块级作用域) => 找循环当前的li和i
                li.setAttribute("class","active");
                console.log(li,i);
            } 
        }
    }

    {
        let i = 1;
        {
            let li = liList[i];
            // 此处在页面加载时,只是绑定事件  => 事件不会触发
            li.onclick = function(){
                // 事件触发时=> 函数内没有定义自己的li和i => 向外跳一层找父作用域(块级作用域) => 找循环当前的li和i
                li.setAttribute("class","active");
                console.log(li,i);
            } 
        }
    }


    {
        let i = 2;
        {
            let li = liList[i];
            // 此处在页面加载时,只是绑定事件  => 事件不会触发
            li.onclick = function(){
                // 事件触发时=> 函数内没有定义自己的li和i => 向外跳一层找父作用域(块级作用域) => 找循环当前的li和i
                li.setAttribute("class","active");
                console.log(li,i);
            } 
        }
    } */
   








</script>

</html>